<template>
  <div class="boxbook">
    <div v-show="chapfal">
      <!-- 背景 -->
      <div
        class="bg"
        :style="'background-image: url(' + workdetails.image + ')'"
      ></div>
      <!-- 头部 -->
      <div class="htear">
        <div class="left">
          <div
            @click="$router.go(-1)"
            class="return iconfont icon-arrowRight-copy-copy"
          ></div>
          <div class="name">{{ workdetails.title }}</div>
        </div>
        <div class="right">
          <router-link
            tag="div"
            to="/search"
            class="searchcon iconfont icon-31sousuo"
          ></router-link>
          <div
            is-link
            @click="showPopup"
            class="classification iconfont icon-a-gengduofenlei"
          ></div>
        </div>
      </div>
      <!-- 弹出内容 -->
      <van-popup
        closeable
        v-model="show"
        position="top"
        :style="{ height: '45%' }"
      >
        <div class="boxpopup">
          <!-- 头部 -->
          <div class="htears">
            <div class="left">
              <div
                @click="$router.go(-1)"
                class="return iconfont icon-arrowRight-copy-copy"
              ></div>
              <div class="name">{{ workdetails.title }}</div>
            </div>
          </div>
          <!-- 分类 -->
          <div class="guide-nav">
            <router-link tag="div" to="/schoolboy" class="box">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-home-copy"></use>
              </svg>
              <div class="boxtext">首页</div>
            </router-link>
            <router-link tag="div" to="/classification" class="box">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenlei"></use>
              </svg>
              <div>分类</div>
            </router-link>
            <router-link tag="div" to="/rankinglist" class="box">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-daochu1024-02"></use>
              </svg>
              <div>排行榜</div>
            </router-link>
            <router-link tag="div" to="/cover" class="box">
              <svg class="icon" aria-hidden="true">
                <use
                  xlink:href="#icon-a-travelhotelholidayvacationcdlistingboo"
                ></use>
              </svg>
              <div>免费</div>
            </router-link>
            <router-link tag="div" to="/end" class="box">
              <svg class="icon sw" aria-hidden="true">
                <use xlink:href="#icon-wanjietuijian"></use>
              </svg>
              <div>完本</div>
            </router-link>
            <router-link tag="div" to="/okami" class="box">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huangguan"></use>
              </svg>
              <div>大神</div>
            </router-link>
          </div>
          <!-- 我的书架 -->
          <router-link tag="div" to="/bookshelf" class="mybookshelf">我的书架</router-link>
        </div>
      </van-popup>
      <!-- 封面 -->
      <div class="details">
        <div class="left">
          <img :src="workdetails.image" alt="" />
        </div>
        <div class="right">
          <div class="bookname">{{ workdetails.title }}</div>
          <div class="name">
            {{ workdetails.name }} <span>{{ workdetails.grade }}</span>
          </div>
          <div class="score">暂无评分/0人评过</div>
          <div class="tpye">{{ workdetails.booktype }}</div>
          <div class="words">{{ workdetails.numberword }}万字 | 连载</div>
        </div>
      </div>
      <!-- 三选择 -->
      <div class="choice">
        <div @click="jump(0)">免费试读</div>
        <div v-show="coll" @click="collection">加入书架</div>
        <div v-show="!coll" @click="collec">已在书架</div>
        <div @click="jump(5)">VIP阅读</div>
      </div>
      <!-- 介绍 -->
      <div class="introduce">
        <div class="div">
          <div @click="add" :class="fase == true ? 'con' : ''">
            {{ workdetails.introduce }}
          </div>
        </div>
      </div>
      <!-- 小目录 -->
      <div class="catalogue">
        <div class="ml">
          <div>目录</div>
          <div @click="chapfal = false" class="more">
            更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span>
          </div>
        </div>
        <div class="catalists">
          <ul>
            <li
              @click="jump(item.id)"
              v-for="(item, index) in catalists"
              :key="index"
            >
              <span> {{ item.cata }}</span>
              <span class="time">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 月票 -->
      <div class="ticket">
        <div class="item">
          <div class="iconfont icon-piaoju"></div>
          <div class="tic">投月票</div>
          <div class="kettic">204票·第1667位</div>
        </div>
        <div class="item">
          <div class="iconfont icon-menpiao"></div>
          <div class="tic">投推荐票</div>
          <div class="kettic">166票推荐·第2984位</div>
        </div>
        <div @click="numpas+=1" class="item">
          <div class="iconfont icon-dashang"></div>
          <div class="tic">打赏</div>
          <div class="kettic">本周{{numpas}}人打赏</div>
        </div>
      </div>
      <!-- 粉丝榜 -->
      <div class="fanlist">
        <router-link tag="div" to="/fanlist" class="fan">
          <div>粉丝榜</div>
          <span
            >2.98万<span class="iconfont icon-arrowRight-copy-copy-copy"></span
          ></span>
        </router-link>
        <div class="fans">
          <div class="ranking">
            <div class="topimg">
              <svg
                style="width: 20px; height: 20px"
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-daochu1024-26"></use>
              </svg>
              <img
                src="https://facepic.qidian.com/qd_face/349573/6225375/50"
                alt=""
              />
              <span class="span">堂主</span>
              <div>木又队长</div>
            </div>
            <div class="topimg">
              <svg
                style="width: 20px; height: 20px"
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-daochu1024-27"></use>
              </svg>
              <img
                src="https://facepic.qidian.com/qd_face/349573/1/50"
                alt=""
              />
              <span class="span">舵主</span>
              <div>幸运小幅</div>
            </div>
            <div class="topimg">
              <svg
                style="width: 20px; height: 20px"
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-daochu1024-28"></use>
              </svg>
              <img
                src="https://facepic.qidian.com/qd_face/349573/3904523/50"
                alt=""
              />
              <span class="span">舵主</span>
              <div>饭后茶语</div>
            </div>
          </div>
          <div class="wodata">
            <div class="img">
              <img
                src="https://qidian.gtimg.com/qd/images/ico/default_user.0.2.png"
                alt=""
              />
            </div>
            <div>我 ▪ 未上榜</div>
          </div>
        </div>
      </div>
      <!-- 本书作者 -->
      <router-link tag="div" :to="'/author?id=' + 20" class="author">
        <div class="aut">本书作者</div>
        <div class="authorcon">
          <div class="topimg">
            <img
              src="https://facepic.qidian.com/qd_face/349573/a404689669/0"
              alt=""
            />
            <span>Lv.2</span>
          </div>
          <div class="authorname">
            <div class="name">云海流金</div>
            <div class="introduce">誓以三寸笔锋，写出七尺立锥之地！</div>
          </div>
          <div class="more iconfont icon-arrowRight-copy-copy-copy"></div>
        </div>
      </router-link>
      <!-- 相关标签 -->
      <div class="author">
        <div class="aut">相关标签</div>
        <div class="label">
          <ul>
            <li>系统流</li>
          </ul>
        </div>
      </div>
      <!-- 更多推荐 -->
      <div class="recommends">
        <div class="top">
          <div>东方玄幻小说推荐</div>
          <router-link :to="'/more?name=' + '东方玄幻'" tag="div" class="span"
            >更多 <span class="iconfont icon-arrowRight-copy-copy-copy"></span
          ></router-link>
        </div>
        <!-- 书籍 -->
        <!-- 书籍 -->
        <div class="content">
          <!-- 轮播图 -->
          <div class="swiper-container-02">
            <div class="swiper-wrapper">
              <div class="swiper-slide item">
                <div class="newarrivals">
                  <div
                    @click="bookdeta(item.id)"
                    v-for="item in newbook"
                    :key="item.id"
                    class="newbook"
                  >
                    <div class="left">
                      <img :src="item.newbookimages" alt="" />
                    </div>
                    <div class="right">
                      <div class="top">{{ item.bookname }}</div>
                      <div class="centenr">
                        {{ item.newbookintroduce }}
                      </div>
                      <div class="bottom">
                        <div class="bookname">
                          <span class="iconfont icon-31wode"></span
                          >{{ item.author }}
                        </div>
                        <div class="label">
                          <span>{{ item.type }}</span
                          ><span>{{ item.serial }}</span
                          ><span>{{ item.words }}万字</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide item">
                <div class="newarrivals">
                  <div
                    @click="bookdeta(item.id)"
                    v-for="item in newbook"
                    :key="item.id"
                    class="newbook"
                  >
                    <div class="left">
                      <img :src="item.newbookimages" alt="" />
                    </div>
                    <div class="right">
                      <div class="top">{{ item.bookname }}</div>
                      <div class="centenr">
                        {{ item.newbookintroduce }}
                      </div>
                      <div class="bottom">
                        <div class="bookname">
                          <span class="iconfont icon-31wode"></span
                          >{{ item.author }}
                        </div>
                        <div class="label">
                          <span>{{ item.type }}</span
                          ><span>{{ item.serial }}</span
                          ><span>{{ item.words }}万字</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide item">
                <div class="newarrivals">
                  <div
                    @click="bookdeta(item.id)"
                    v-for="item in newbook"
                    :key="item.id"
                    class="newbook"
                  >
                    <div class="left">
                      <img :src="item.newbookimages" alt="" />
                    </div>
                    <div class="right">
                      <div class="top">{{ item.bookname }}</div>
                      <div class="centenr">
                        {{ item.newbookintroduce }}
                      </div>
                      <div class="bottom">
                        <div class="bookname">
                          <span class="iconfont icon-31wode"></span
                          >{{ item.author }}
                        </div>
                        <div class="label">
                          <span>{{ item.type }}</span
                          ><span>{{ item.serial }}</span
                          ><span>{{ item.words }}万字</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部组件 -->
      <footers></footers>
    </div>
    <!-- 大目录 -->
    <div v-show="!chapfal" class="catalcon">
      <!-- 头部 -->
      <div class="htear">
        <div class="left">
          <div
            @click="chapfal = true"
            class="return iconfont icon-arrowRight-copy-copy"
          ></div>
          <div class="name">{{ workdetails.title }}</div>
        </div>
      </div>
      <div class="chapterlists">
        <div>共{{ chapterlists.length }}章</div>
        <div class="text">正文卷</div>
        <ul>
          <li
            :style="{ color: item.fas == 1 ? '#bbb' : '' }"
            @click="jump(index)"
            v-for="(item, index) in chapterlists"
            :key="index"
          >
            {{ item.text }}
            <span v-show="item.fas == 1" class="iconfont icon-icon-"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import footers from "./footers.vue";
export default {
  components: { footers },
  data() {
    return {
      name: null, //书名
      fase: false, //判断详情
      show: false, //弹出判断
      workdetails: [], //图书详情
      // 推荐新书列表
      newbook: [
        {
          id: 13,
          bookname: "明克街13号",
          newbookimages:
            "https://bookcover.yuewen.com/qdbimg/349573/1030870265/150",
          newbookintroduce:
            "我喜欢坐在夜晚空无一人的大街上，听着“他们”的窃窃私语，享受着“他们”的喧嚣。",
          author: "纯洁滴小龙",
          type: "都市",
          serial: "连载中",
          words: 65.04,
        },
        {
          id: 3,
          bookname: "看个直播，我竟被当成了仙师？",
          newbookimages:
            "https://bookcover.yuewen.com/qdbimg/349573/1031299884/150",
          newbookintroduce:
            "苏凡是一个探险发烧友，意外重生到平行世界，这个世界诡异知识匮乏，甚至没有相关传说。本来苏凡也没太在意，以为这是一个正常的科技世界，直到闲着无聊看明星探险队的直播……镜头前一个皮肤白暂十分清纯甜美的姑娘对着大家打招呼。“冰夏直播间的各位小伙伴们大家好啊，我是叶语冰，我们的荒村探险之旅马上就要开始了，大家期待吗？”叶语冰身披一件红色呢子衣，清纯脸庞带着无暇的笑容总是那么令人陶醉。【期待！】【期待！期待！！】……网友的期待打满了整个公屏。【此地背阴，位于山坳中，三面环山，乃邪汇聚之地，还是早点回去吧。】寝室内，苏凡皱眉发了一句。顿时引起了直播间网友的一片讨伐！直到……然后……最后……，苏凡：我随便说几句，就被当成了仙师？——————普通读者群：群号:513540505（欢迎所有读者）VIP读者群：群号:940069612（需要2000以上粉丝值）",
          author: "我真不想出名",
          type: "都市",
          serial: "连载中",
          words: 31.92,
        },
        {
          id: 51,
          bookname: "某美漫的超级玩家",
          newbookimages:
            "https://bookcover.yuewen.com/qdbimg/349573/1031112653/150",
          newbookintroduce:
            "美漫世界，重新启航！这一次，是有关于洛克的故事！姓名洛克。职业玩家！唯一玩家！:513540505（欢迎所有读者）",
          author: "米一克",
          type: "科幻",
          serial: "连载中",
          words: 104.69,
        },
      ],
      catalists: [], //前五章的目录
      workdetails_tab: [], //空数组
      id: null, //书籍id
      chapterlists: [], //小说目录
      chapfal: true, //判断目录弹出
      adplst: [], //书架数组
      coll: true, //判断是否收藏
      numpas:2,//打赏人数
    };
  },
  created() {
    this.id = this.$route.query.id; //书籍id
    this.$axios.get("/static.json").then((res) => {
      let data = res.data;
      this.workdetails = data.workdetails[this.id]; //通过id查找
      this.catalists = this.workdetails.catalists.slice(0, 5); //目录前五
      this.chapterlists = this.workdetails.chapterlists; //全部目录
    });
    //判断是否为已收藏
    if (!window.localStorage.getItem("bookshelf") == "") {
      this.adplst = JSON.parse(localStorage.getItem("bookshelf"));
      if (this.adplst.includes(this.id)) {
        this.coll = false;
      } else {
        this.coll = true;
      }
    }
  },
  methods: {
    //跳转书籍内容
    jump(index) {
      this.$router.push({
        path: "/novelcontent",
        query: {
          id: this.id,
          index: index + 1,
          fas: this.chapterlists[index].fas,
        },
      });
    },
    // 判断详情
    add() {
      this.fase = !this.fase;
    },
    //头部弹出
    showPopup() {
      this.show = true;
    },
    // 路由跳转传参
    bookdeta(id) {
      this.$router.push({
        path: "/bookdetails",
        query: {
          id: id,
        },
      });
    },
    //收藏
    collection() {
      this.coll = false; //收藏
      //判断如果收藏数组为空的话直接添加
      if (window.localStorage.getItem("bookshelf") == "") {
        this.adplst.push(this.id);
        window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
      } else {
        //不为空的话先添加收藏数组的值，在添加要收藏的id,如果有相同的id的话则不添加
        this.adplst = JSON.parse(localStorage.getItem("bookshelf"));
        if (this.adplst.includes(this.id)) {
        return
        } else {
         this.adplst.push(this.id);
        window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
        }
        
       
      }
    },
    //取消收藏
    collec() {
      this.coll = true; //取消收藏
      this.adplst = JSON.parse(localStorage.getItem("bookshelf")); //获取收藏数组
      this.adplst.forEach((v, i) => {
        if (this.id == v) {
          this.adplst.splice(i, 1); //删除收藏的数组
        }
      });
      window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
    },
  },
  mounted() {
    new Swiper(".swiper-container-02", {
      pagination: ".swiper-pagination-02",
      slidesPerView: 1,
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 30,
    });
  },
};
</script>

<style lang="less">
.boxbook {
  position: relative;
  max-width: 375px;
  min-height: 667px;
  overflow: hidden;
  // 关闭按钮
  .van-popup__close-icon--top-right {
    top: 13px;
  }
  .boxpopup {
    .htears {
      width: 100%;
      display: flex;
      height: 22px;
      padding: 11px 0px 10px 0px;
      justify-content: space-between;
      align-items: center;
      .left,
      .right {
        display: flex;
        div {
          padding: 0px 10px;
          text-align: center;
          font-size: 18px;
          color: #3c3b3b;
        }
        .name {
          font-size: 14px;
          color: #424141;
        }
        .return {
          color: black;
        }
      }
    }
    .guide-nav {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0px 16px;
      .box {
        width: 58px;
        height: 58px;
        line-height: 58px;
        text-align: center;
        margin: 12px 24px;
        div {
          position: relative;
          top: -33px;
          font-size: 14px;
        }
      }
    }
    .mybookshelf {
      margin: 20px 50px;
      text-align: center;
      padding: 8px 0px;
      font-size: 14px;
      color: white;
      font-weight: 500;
      background-color: #ed424b;
      border-radius: 20px;
    }
    .sw {
      font-size: 40px;
    }
  }

  // 滑动图片
  .swiper-container-02 {
    max-width: 345px;
    overflow: hidden;
    .swiper-wrapper {
      display: flex;
    }
  }
  .bg {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    // background: url(https://bookcover.yuewen.com/qdbimg/349573/1030879001/150);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(1.8);
    transform-origin: center center;
    filter: blur(30px);
    opacity: 0.3;
    overflow: hidden;
  }
  .htear {
    position: absolute;
    width: 100%;
    display: flex;
    height: 22px;
    padding: 11px 0px 10px 0px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    .left,
    .right {
      display: flex;
      div {
        padding: 0px 10px;
        text-align: center;
        font-size: 18px;
        color: #3c3b3b;
      }
      .name {
        font-size: 14px;
        color: #424141;
        padding: 0px;
      }
      .return {
        color: black;
      }
    }
  }
  .details {
    position: relative;
    display: flex;
    z-index: 2;
    top: 44px;
    padding: 16px;
    .left {
      width: 84px;
      height: 112px;
      margin-right: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      div {
        padding: 5px 0px;
      }
      .bookname {
        color: #33373d;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
        line-height: 16px;
        height: 16px;
      }
      .name {
        color: #33373d;
        font-size: 13px;
        overflow: hidden;
        line-height: 13px;
        height: 13px;
        display: flex;
        span {
          background-color: #f0643a;
          color: #fef3e6;
          font-size: 12px;
          display: block;
          transform: scale(0.8);
          padding: 1px;
        }
      }
      .score {
        font-size: 12px;
        line-height: 12px;
        height: 12px;
        color: #969ba3;
      }
      .tpye {
        font-size: 12px;
        line-height: 12px;
        height: 12px;
        color: #33373d;
      }
      .words {
        font-size: 12px;
        line-height: 12px;
        height: 12px;
        color: #33373d;
      }
    }
  }
  .choice {
    display: flex;
    margin-top: 45px;
    width: 100%;
    position: relative;
    z-index: 2;
    div {
      padding: 5px 22px;
      color: #777777;
      font-size: 13px;
      background-color: white;
      margin: 0px 15px;
    }
  }
  .introduce {
    position: relative;
    z-index: 2;
    background-color: white;
    margin-top: 20px;
    width: 100%;
    .div {
      border-top: 1px solid #f0f1f2;
      border-bottom: 1px solid #f0f1f2;
      margin-left: 16px;
      div {
        font-size: 14px;
        line-height: 23px;
        color: #33373d;
        padding: 16px 0px;
        padding-right: 16px;
        height: 80px;
        border-bottom: 16px solid transparent;
        overflow: hidden;
      }
      .con {
        align-items: 16px;
        font-size: 14px;
        line-height: 23px;
        height: auto;
        color: #33373d;
        padding: 16px 0px;
        padding-right: 16px;
        border-bottom: 0px;
      }
    }
  }
  .catalogue {
    position: relative;
    background-color: white;
    width: 100%;

    .ml {
      width: calc(100% - 16px);
      margin-left: 16px;
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f1f2;
      div {
        color: #33373d;
        font-size: 16px;
        font-weight: 600;
      }
      .more {
        color: #969ba3;
        font-size: 14px;
        margin-right: 16px;
        font-weight: 400;
      }
    }
    .catalists {
      width: calc(100% - 16px);
      margin-left: 16px;
      ul {
        padding-bottom: 10px;
        li {
          width: 100%;
          span {
            display: inline-block;
            font-size: 14px;
            color: #3f5a93;
            margin: 10px 0px;
            overflow: hidden;
            max-width: 160px;
            vertical-align: bottom;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .time {
            color: #999999;
            padding-left: 25px;
          }
        }
      }
    }
  }
  .ticket {
    width: 100%;
    margin: 12px 0px;
    padding: 10px 0px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    .item {
      text-align: center;
      .iconfont {
        font-size: 40px;
        color: #f17177;
      }
      .tic {
        font-size: 12px;
        color: #33373d;
        margin-top: 3px;
      }
      .kettic {
        font-size: 12px;
        color: #969ba3;
        transform: scale(0.8);
      }
    }
  }
  .fanlist {
    width: calc(100% - 16px);
    background-color: white;
    padding-left: 16px;
    margin-bottom: 12px;
    .fan {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 10px 0px;
      border-bottom: 1px solid #f0f1f2;
      div {
        color: #33373d;
        font-size: 16px;
        font-weight: 600;
      }
      span {
        margin-right: 16px;
        color: #969ba3;
        font-size: 14px;
        .icon-arrowRight-copy-copy-copy {
          margin-right: 0px;
          padding-left: 5px;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
    .fans {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .ranking {
        display: flex;
        flex: 1;
        text-align: center;
        align-items: center;
        .topimg {
          width: 55px;
          position: relative;
          margin: 0px 16px;
          display: flex;
          padding: 16px 0px;
          flex-direction: column;
          align-items: center;
          img {
            width: 80%;
            border-radius: 50%;
          }
          .span {
            position: absolute;
            bottom: 43px;
            font-size: 12px;
            color: white;
            background-color: #f38361;
            padding: 0px 7px 0px 7px;
            border-radius: 8px;
            border-top: 1px solid white;
            border-left: 1px solid white;
            border-right: 1px solid white;
          }
          div {
            color: #33373d;
            font-size: 13px;
            width: 56px;
            padding: 5px 0px;
          }
        }
      }
      .wodata {
        flex: 1;
        border-left: 1px solid #f0f1f2;
        width: 55px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img {
          width: 55px;
          margin-top: 10px;

          img {
            width: 80%;
            border-radius: 50%;
          }
        }
        div {
          color: #33373d;
          font-size: 13px;
          width: 65px;
          padding: 5px 0px;
        }
      }
    }
  }
  .author {
    width: 100%;
    background-color: white;
    .aut {
      font-size: 16px;
      color: #33373d;
      font-weight: 600;
      padding: 12px 0px;
      margin-left: 16px;
      border-bottom: 1px solid #f0f1f2;
    }
    .authorcon {
      width: 100%;
      height: 85px;
      display: flex;
      position: relative;
      background-color: white;
      margin-bottom: 12px;
      .topimg {
        width: 48px;
        height: 48px;
        position: relative;
        margin: 0px 12px 0px 16px;
        padding: 16px 0px;
        img {
          width: 100%;
          border-radius: 50%;
        }
        span {
          position: absolute;
          bottom: 16px;
          left: 5px;
          font-size: 12px;
          color: white;
          background-color: #f38361;
          padding: 0px 7px 0px 7px;
          border-radius: 8px;
          border-top: 1px solid white;
          border-left: 1px solid white;
          border-right: 1px solid white;
        }
      }
      .authorname {
        padding: 16px 0px;
        flex: 1;
        border-top: 1px solid whitesmoke;
        .name {
          color: #33373d;
          font-size: 16px;
          overflow: hidden;
          font-weight: 600;
          white-space: nowrap;
          margin-bottom: 5px;
        }
        .introduce {
          font-size: 14px;
          color: #a8a7a9;
          margin: 0px;
        }
      }
      .more {
        position: absolute;
        right: 16px;
        top: calc(85px / 2 - 16px / 2);
        margin: auto;
        z-index: 3;
      }
    }
    .label {
      ul {
        li {
          margin: 12px 0px 12px 16px;
          display: inline-block;
          font-size: 13px;
          color: #969ba3;
          border: 1px solid #969ba3;
          border-radius: 15px;
          padding: 5px 10px;
        }
      }
    }
  }
  .recommends {
    margin: 12px 0px;
    background-color: white;
    .top {
      display: flex;
      justify-content: space-between;
      margin-left: 12px;
      padding: 12px 0px;
      border-bottom: 1px solid whitesmoke;
      div {
        font-size: 16px;
        color: #33373d;
        font-weight: 600;
      }
      .span {
        color: #969ba3;
        font-size: 14px;
        padding-right: 5px;
      }
    }
    .content {
      width: 100%;
      padding-bottom: 15px;
      .item {
        width: 66px;
        .img {
          width: 66px;
          height: 88px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          width: 66px;
          overflow: hidden;
          font-size: 13px;
          max-height: 36px;
          color: #3a3939;
          margin: 5px 0px;
        }
        .name {
          font-size: 12px;
          color: #969ba3;
          height: 12px;
          width: 66px;
          line-height: 12px;
          overflow: hidden;
        }
      }
      .newarrivals {
        display: flex;
        flex-direction: column;
        .newbook {
          padding: 10px 0px;
          width: 100%;
          margin-left: 16px;
          display: flex;
          align-items: center;
          .left {
            width: 66px;
            height: 88px;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 269px;
            .top {
              font-size: 16px;
              font-weight: 900;
              color: #33373d;
              line-height: 1.4;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              border: 0px;
              padding: 5px 0px;
              margin: 0px;
            }
            .centenr {
              color: #969ba3;
              font-size: 14px;
              line-height: 1.1875rem;
              display: -webkit-box;
              height: 2.25rem;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin: 6px 0;
            }
            .bottom {
              display: flex;
              color: #969ba3;
              font-size: 12px;
              justify-content: space-between;
              .bookname {
                font-size: 13px;
                .icon-31wode {
                  margin-right: 3px;
                  font-size: 13px;
                }
              }
              .label {
                display: flex;
                span {
                  margin-left: 2px;
                  font-size: 12px;
                  display: block;
                  padding: 1px 2px;
                  transform: scale(0.8);
                }
                span:nth-child(1) {
                  border: 1px solid #969ba3;
                  color: #969ba3;
                }
                span:nth-child(2) {
                  border: 1px solid #ed424b;
                  color: #ed424b;
                }
                span:nth-child(3) {
                  border: 1px solid #008dff;
                  color: #008dff;
                }
              }
            }
          }
        }
        .newbook:nth-child(3) {
          border-block: 0px;
        }
      }
    }
  }
  .catalcon {
    width: 100%;
    background: white;
    .htear {
      position: relative;
      margin: 0px;
    }
    .chapterlists {
      div {
        padding: 8px 16px;
        color: #33373d;
        font-size: 15px;
        font-weight: 600;
        border-top: 1px solid #eaeaea;
      }
      .text {
        padding: 12px 16px 8px 16px;
        font-size: 13px;
        color: #969ba3;
        background-color: #f6f7f9;
        border: 0;
      }
      ul {
        li {
          width: calc(100% - 16px);
          margin-left: 16px;
          padding: 12px 0px;
          font-size: 14px;
          color: #33373d;
          border-bottom: 1px solid #efefef;
          display: flex;
          justify-content: space-between;
          span {
            padding-right: 16px;
          }
        }
      }
    }
  }
}
</style>